<!--
 * @Author: zhao 13370229059@163.com
 * @Date: 2024-04-19 22:33:36
 * @LastEditors: zhao 13370229059@163.com
 * @LastEditTime: 2024-05-28 11:27:43
 * @FilePath: \work\pages\index\components\table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <view class="table">
    <view class="table-search">
      <view>
        <uv-search
          v-model="params.options.query"
          showAction
          actionText="搜索"
          animation
          @search="httpList(true)"
          @custom="httpList(true)"
        ></uv-search>
      </view>
    </view>
    <next-table
      stripe
      highlight
      showPaging
      :pageIndex="params.options.page"
      :pageTotal="params.pageTotal"
      :columns="table.columns"
      sum-text="合计"
      border
      :data="table.list"
      @pageChange="pageChange"
      @onDetail="onDetail"
    >
    </next-table>
  </view>
</template>

<script setup>
  import { ref, reactive, computed, defineEmits } from 'vue';
  let emits = defineEmits(['onChange']);
  let params = reactive({
    options: {
      page: 1,
      query: ''
    },
    pageTotal: 0
  });
  const onDetail = val => {
    emits('onChange', val);
  };
  let table = reactive({
    columns: [
      { name: 'index', label: '序号', width: 80, align: 'center' },
      {
        name: 'order_num',
        type: 'operation',
        label: '订单编号',
        align: 'center',
        class: 'like',
        color:'#409eff',
        width: 150,
        renders: [{ name: '查看', type: 'custom', func: 'onDetail' }]
      },
      { name: 'customer_name', label: '客户', width: 150 },
      { name: 'billing_date', label: '下单日期', width: 120 },
      { name: 'delivery_date', label: '交货日期', width: 120 },
      { name: 'note', label: '备注' }
    ],
    list: []
  });
  const httpList = async reset => {
    if (reset) params.options.page = 1;
    let { orders, paginate_meta } = await uni.$uv.http.post('orders/list', params.options);
    let orderData = [];
    params.pageTotal = paginate_meta.total_pages;
    orders.map((r, index) => {
      orderData[index] = { ...r.order, index: index + 1 };
    });
    table.list = orderData;
  };
  const pageChange = val => {
    params.options.page = val;
    httpList();
  };
  httpList(true);
</script>
<style></style>
<style lang="scss" scoped>
  .table {
    padding: 10rpx;
    &-search {
      display: inline-flex;
      width: 100%;
      padding-bottom: 17rpx;
      justify-content: flex-end;
    }
    ::v-deep .next-table {
      .like {
        color: #409eff;
        display: inline-flex;
        align-items: center;
        vertical-align: middle;
        cursor: pointer;
        font-weight: 500;
      }
    }
  }
</style>